import QtQuick
import QtQuick.Controls

MListView {
    id: root

    signal playMusic(int index)
    signal addMusic(int index)
    signal downloadMusic(int index)
    signal loadMore
    property bool loadingAllFinished: false
    property bool loadingMore: false

    component CommLabel: Label {
        height: parent.height
        elide: Text.ElideRight
        verticalAlignment: Text.AlignVCenter
        padding: 4
        MToolTip {
            text: parent.text
            x: hoverArea.mouseX + 10
            y: hoverArea.mouseY + 10
            visible: hoverArea.containsMouse && parent.text.length * font.pixelSize > parent.width
        }

        MouseArea {
            id: hoverArea
            anchors.fill: parent
            hoverEnabled: true
            acceptedButtons: Qt.NoButton
        }
    }
    clip: true
    headerPositioning: ListView.OverlayHeader
    header: Rectangle {
        width: ListView.view.width
        height: 40
        color: palette.window
        z: 2
        readonly property real cellWidth: (width - _numHeader.width - _durationHeader.width - _operationHeader.width) / 3
        Row {
            width: parent.width
            height: _numHeader.implicitHeight
            anchors.verticalCenter: parent.verticalCenter
            CommLabel {
                id: _numHeader
                width: 40
                text: "#"
                horizontalAlignment: Text.AlignHCenter
            }
            CommLabel {
                width: cellWidth
                height: parent.height
                elide: Text.ElideRight
                text: "歌曲名"
            }
            CommLabel {
                width: cellWidth
                height: parent.height
                elide: Text.ElideRight
                text: "艺术家"
            }
            CommLabel {
                width: cellWidth
                height: parent.height
                elide: Text.ElideRight
                text: "专辑名"
            }
            CommLabel {
                id: _durationHeader
                width: 80
                height: parent.height
                elide: Text.ElideRight
                text: "时长"
            }
            CommLabel {
                id: _operationHeader
                width: 160
                height: parent.height
                elide: Text.ElideRight
                text: "操作"
            }
        }
        Rectangle {
            anchors.bottom: parent.bottom
            width: parent.width
            height: 1
            color: palette.mid
        }
    }
    delegate: Rectangle {
        id: itemDelegate
        width: ListView.view.width
        height: 40
        color: _listViewMouseArea.containsMouse ? Qt.alpha(palette.button, 0.5) : "transparent"
        required property int index
        required property string name
        required property string artists
        required property string album
        required property string duration
        readonly property real cellWidth: (width - _num.width - _duration.width - _operation.width) / 3

        MouseArea {
            id: _listViewMouseArea
            anchors.fill: parent
            hoverEnabled: true

            onDoubleClicked: {
                viewModel.playMusic(index);
            }
            Row {
                anchors.fill: parent
                CommLabel {
                    id: _num
                    width: 40
                    text: index + 1
                    horizontalAlignment: Text.AlignHCenter
                }
                CommLabel {
                    id: _name
                    width: cellWidth
                    text: name
                }
                CommLabel {
                    id: _artists
                    width: cellWidth
                    text: artists
                }
                CommLabel {
                    id: _album
                    width: cellWidth
                    text: album
                }
                CommLabel {
                    id: _duration
                    width: 80
                    text: duration
                }
                Row {
                    id: _operation
                    width: 160
                    height: parent.height
                    spacing: 5

                    Repeater {
                        model: [
                            {
                                name: "播放",
                                iconName: "ri.headphone-fill",
                                onClicked: function () {
                                    root.playMusic(itemDelegate.index);
                                }
                            },
                            {
                                name: "添加到播放列表",
                                iconName: "fa.plus",
                                onClicked: function () {
                                    root.addMusic(itemDelegate.index);
                                }
                            },
                            {
                                name: "下载",
                                iconName: "fa.download",
                                onClicked: function () {
                                    root.downloadMusic(itemDelegate.index);
                                }
                            }
                        ]
                        IconButton {
                            required property var model
                            tipName: model.name
                            iconName: model.iconName
                            iconSize: 18
                            anchors.verticalCenter: parent.verticalCenter
                            raduis: 4
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                model.onClicked();
                            }
                        }
                    }
                }
            }
        }
    }
    // 当滚动到底部时加载更多
    onAtYEndChanged: {
        // 如果数据为空则不加载
        if (model.count === 0) {
            return;
        }
        if (atYEnd) {
            root.loadMore();
        }
    }
    // 当加载更多时底部显示加载中
    footer: Rectangle {
        width: ListView.view.width
        height: 40
        color: palette.window
        visible: root.loadingAllFinished || root.loadingMore
        Label {
            anchors.centerIn: parent
            text: root.loadingAllFinished ? "别划了，已经到头了" : "加载中..."
        }
    }
}
